<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <label v-for="(item, index) in navBar" :key="index" :class="{'active': navBarIndex === index}" @click="navChange(item, index)">{{ item.title }}</label>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="main-page">
        <div v-for="(item, index) in listData" :key="index" @click="goDetail(item)">
          <img :src="item.url" alt="">
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonContent } from '@ionic/vue';
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonHeader, IonToolbar, IonContent
  },
  setup() {
    const router = useRouter();
    const state = reactive({
      navBar: [
        {
          title: '录播课',
          id: 1
        },
        {
          title: '云课堂',
          id: 2
        },
        {
          title: '商城',
          id: 3
        }
      ],
      navBarIndex: 0,
      listData: [
        {
          title: '课程名称',
          id: '1111',
          url: require('@/assets/images/st.png')
        },
        {
          title: '课程名称',
          id: '1111',
          url: require('@/assets/images/st.png')
        },
        {
          title: '课程名称',
          id: '1111',
          url: require('@/assets/images/st.png')
        }
      ]
    })

    function navChange(item: any, index: any){
      if(index !== state.navBarIndex){
        state.navBarIndex = index;
      }
    }

    function goDetail(data: any){
      router.push(
        {
          path: '/class-room-detail',
          query: {
            ...data
          }
        }
      )
    }
    return {
      ...toRefs(state),
      navChange,
      goDetail
    }
  }
}
</script>
<style lang="scss" scoped>
  ion-header{
    label{
      font-size: 16px;
      color: #999C9F;
      margin-left: 10px;
    }
    label.active{
      font-size: 20px;
      color: #1E1E1F;
      font-weight: bold;
    }
  }
  .main-page {
    padding: 0px 20px;
    img{
      margin-bottom: 20px;
    }
  }
</style>